<template>
    <a-button
        :loading="loading"
        @click="handleClick"
        v-bind="$attrs"
    >
        <slot />
        <template
            #icon
            v-if="icon"
        >
            <IconPlus v-if="icon === 'create'" />
            <IconDownload v-if="icon === 'download'" />
        </template>
    </a-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconPlus, IconDownload } from '@arco-design/web-vue/es/icon'

const loading = ref(false)
const { beforeClick } = defineProps<{
    beforeClick?: () => boolean | Promise<boolean> | void
    icon?: 'create' | 'download'
}>()

const handleClick = async () => {
    if (!beforeClick) return
    try {
        loading.value = true
        await beforeClick?.()
    } finally {
        loading.value = false
    }
}
</script>
